<template lang="">
    <div>
        <van-nav-bar title="结算" />
        <van-tabs v-model:active="tab" @click-tab="onClickTab">
            <van-tab title="全部" name="all"></van-tab>
            <van-tab title="未签署" name="wait"></van-tab>
            <van-tab title="已签署" name="over"></van-tab>                 
        </van-tabs>

        <div class="item-list">
            <div class="item" v-for="(item, index) in data" :key="index">
                <div class="item-left">
                    <div class="left-title">{{item.title}}</div>
                    <div class="left-time">{{item.creat_time}}</div>
                </div>
                <div class="item-right" @click="QianShu(item.id)">
                    {{item.sign_status == 0 ? '去签署' : item.money}} 
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { ref, reactive, onMounted } from 'vue'
import router from '../router';
import { getJieSuan } from "../api/index"
import { getToken, isMobile, isWx, log, LOCAL_USER, LOCAL_WX } from "../utils/user"
export default {
    setup(){
        const QianShu = id => {
            router.push("QianShu/"+id)
        }
        const data  = ref([])
        onMounted(() => {
            getJieSuan({}).then(res => {
                log("dw",res)
                if(res.status == 'ok'){
                    data.value = res.data.list
                }
            })
        })

        return {
            QianShu,
            data
        }
    }
}
</script>
<style scoped>
.item-list {
    padding: 15px;
    display: flex;
    flex-direction: column;
}

.item {
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E3E4E5;
}
.item-left{
    width: 80%;
}
.left-title{
    margin-bottom: 10px;
}
.item-right {
    color: #0052D9;
}
</style>